<template>
  <view>
    <view class="header">
      <u-icon
        class="header-image"
        name="arrow-left"
        color="#fff"
        size="40"
        @click="back"
      ></u-icon>
      <!-- <image class="header-image"  src="./back.png" mode="" @click="back"></image> -->
      <image class="header-img" src="./sun.png" mode=""></image>
      <view class="header-title">
        <view class="header-circle">
          <image class="header-circle-img" src="./bg.png" mode=""></image>
        </view>
        <view class="follow">
          <span>+关注</span>
        </view>
        <view class="header-name">
          <span>东方不败</span>
          <view class="header-bq">
            <image class="header-bq-img" src="./ok.png" mode=""></image>
            <span>运动员</span>
          </view>
        </view>
        <view class="header-but">
          <view class="header-but-one">
            <span>110</span>
            <span>关注</span>
          </view>
          <view class="header-but-one">
            <span>110</span>
            <span>粉丝</span>
          </view>
          <view class="header-but-one">
            <span>110</span>
            <span>点赞</span>
          </view>
        </view>
      </view>
    </view>
    <!-- 动态-->
    <view class="title-title">
      <view class="title-shu"></view>
      <span>动态</span>
    </view>
    <!-- 内容 -->
    <view class="contain">
      <view class="first-one" v-for="item in follow" :key="item.id" @click="xq">
        <view class="contain-top">
          <image class="contain-top-image" src="./bg.png" mode=""></image>
          <view class="right">
            <view class="top">
              <view class="name">
                {{ item.name }}
              </view>
              <view class="bq">
                {{ item.bq }}
              </view>
            </view>
            <view class="time">
              {{ item.time }}
            </view>
          </view>
        </view>
        <view class="text">
          <span>{{ item.smtit }}</span>
          <view class="bq">
            {{ item.status }}
          </view>
        </view>
        <view class="first-main">
          <view class="title">
            {{ item.neirong }}
          </view>
          <view class="img">
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
          </view>
          <view class="button">
            <view class="left">
              <image class="left-img" src="./DZ.jpg" mode=""></image>
            </view>
            <view class="right">
              <view class="lj">
                <image src="./community/fx.png" mode=""></image>
                <span>9</span>
              </view>
              <view class="lj">
                <image src="./community/bb.png" mode=""></image>
                <span>7</span>
              </view>
              <view class="lj">
                <image src="./community/sc.png" mode=""></image>
                <span>9</span>
              </view>
              <view class="lj">
                <image src="./community/good.png" mode=""></image>
                <span>54</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      follow: [
        {
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
        },
        {
          id: 2,
          name: "A***着",
          bq: "明星",
          time: "2023-09-12 12:00",
          smtit: "跑步人的二天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
        },
      ],
    };
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss">
.header {
  width: 750rpx;
  height: 608rpx;
  // border: 1rpx solid red;
  position: relative;
  margin-bottom: 20rpx;

  .header-image {
    width: 18rpx;
    height: 34rpx;
    position: absolute;
    left: 34rpx;
    top: 118rpx;
  }
  .header-img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
  }
  .header-title {
    width: 750rpx;
    height: 276rpx;
    // border: 1px solid blue;
    background-color: #ffffff;
    position: absolute;
    top: 300rpx;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    .header-circle {
      width: 148rpx;
      height: 148rpx;
      // border: 1px solid #FFFFFF;
      background-color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -74rpx;
      left: 74rpx;
      .header-circle-img {
        width: 136rpx;
        height: 136rpx;
        border-radius: 50%;
      }
    }
    .follow {
      width: 116rpx;
      height: 48rpx;
      border-radius: 24rpx;
      background-color: #f4333c;
      text-align: center;
      position: absolute;
      right: 48rpx;
      top: 24rpx;
      line-height: 48rpx;
      color: #ffffff;
      font-size: 24rpx;
    }
    .header-name {
      color: #333333;
      width: auto;
      height: 36rpx;
      position: absolute;
      top: 96rpx;
      left: 80rpx;
      font-size: 36rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      span {
        margin-right: 20rpx;
      }
      .header-bq {
        width: 200rpx;
        height: 30rpx;
        background-color: #fcf0f0;
        width: 134rpx;
        height: 46rpx;
        border-radius: 23rpx;
        text-align: center;
        line-height: 30rpx;
        font-size: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .header-bq-img {
          width: 20rpx;
          height: 26rpx;
        }
        span {
          color: #f4333c;
          margin-left: 10rpx;
        }
      }
    }
    .header-but {
      height: 112rpx;
      width: 100%;
      // border: 1px solid blue;
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .header-but-one {
        width: 60rpx;
        height: 64rpx;
        // border: 1rpx solid red;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 32rpx;
        span {
          width: 100%;
        }
        span:nth-of-type(2) {
          text-align: center;
          font-size: 24rpx;
        }
      }
    }
  }
}
.title-title {
  width: 750rpx;
  height: 32rpx;
  // border: 1px solid red;
  padding: 0rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  .title-shu {
    width: 6rpx;
    height: 28rpx;
    background-color: #f4333c;
    margin-right: 20rpx;
  }
}
.contain {
  width: 750rpx;
  // height: 1210rpx;
  background-color: #ffffff;
  padding: 0 20rpx;
  .first-one {
    width: 100%;
    // height: 600rpx;
    // border: 1px solid red;
    margin-bottom: 40rpx;
    .contain-top {
      width: 100%;
      height: 150rpx;
      // border: 1px solid red;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .contain-top-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .right {
        width: 300rpx;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        .top {
          width: 100%;
          height: 75rpx;
          // border: 1px solid red;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .name {
            margin-right: 20rpx;
            font-size: 30rpx;
          }
          .bq {
            border-radius: 10rpx;
            height: 40rpx;
            background-color: #15f6a4;
            font-size: 16rpx;
            line-height: 20rpx;
            color: #12ca87;
            padding: 10rpx;
          }
        }
        .time {
          width: 100%;
          height: 75rpx;
          // border: 1px solid red;
          &:hover {
            color: #cacaca;
          }
        }
      }
    }
    .text {
      font-size: 30rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60rpx;
      // border: 1px solid red;
      margin-bottom: 10rpx;
      .bq {
        font-size: 10rpx;
        background-color: #b2b2b2;
        padding: 0 20rpx;
        margin-left: 20rpx;
      }
    }
    .first-main {
      width: 100%;
      // height: 200rpx;
      // border: 1px solid red;

      .title {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
      }
      .img {
        width: 100%;
        .image {
          width: 220rpx;
          height: 150rpx;
          margin: 0 8rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }
      .button {
        width: 100%;
        height: 60rpx;
        // border: 1rpx solid red;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          .left-img {
            width: 300rpx;
            height: 40rpx;
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 400rpx;
          height: 60rpx;
          // border: 1px solid red;
          .lj {
            width: 100%;
            height: 100%;
            // border: 1px solid blue;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-right: 5rpx;
            image {
              width: 40rpx;
              height: 40rpx;
              // border: 1px solid #FF3C2A;
            }
          }
        }
      }
    }
  }
}
</style>
